<template>
<div class='container'>
  <el-card>
        <!-- 面包屑 -->
      <div slot="header" v-if="subject.id && subject.name">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>学科管理</el-breadcrumb-item>
          <el-breadcrumb-item>{{subject.name}}</el-breadcrumb-item>
          <el-breadcrumb-item>目录管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
  <!-- 表头按钮 输入框 -->
  <el-form :inline="true" label-width="80px" class="demo-form-inline">
  <el-form-item label="目录名称" size="small">
    <el-input style="200px" v-model="from.directoryName" clearable>
    </el-input>
  </el-form-item>
  <el-form-item label="状态" size="small" >
    <el-select v-model="from.state" clearable >
      <el-option label="启用" :value='1'></el-option>
      <el-option label="禁止" :value='0'></el-option>
    </el-select>
  </el-form-item>
  <el-form-item style="text-align:right">
    <el-button  size="small" @click="clear()">清除</el-button>
    <el-button  type="primary" size="small" @click="searchList()">搜索</el-button>
  </el-form-item>
  <el-form-item style="float:right">
      <!-- 从学科管理页面进入时有返回学科链接 -->
    <el-button icon="el-icon-back" type="text"
    v-if="subject.id && subject.name"
    @click="$router.back()"
    style="margin-right:5px;">返回学科</el-button>
    <el-button type="success" icon="el-icon-edit" size="small" @click="Revise">新增目录</el-button>
  </el-form-item>
    <el-alert
    class="alert"
    :title="`数据一共${total}条`"
    type="info"
    show-icon
    style="margin-bottom:15px"
    >
  </el-alert>
</el-form>
<!-- 表单 -->
 <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        label="序号"
        type="index"
        width="80px">
      </el-table-column>
      <el-table-column
        prop="subjectName"
        label="所属学科">
      </el-table-column>
      <el-table-column
        prop="directoryName"
        label="目录名称">
      </el-table-column>
      <el-table-column
        prop="username"
        label="创建者">
      </el-table-column>
      <el-table-column
        prop="addDate"
        label="创建日期">
      <template slot-scope="scope">
        {{scope.row.addDate.substr(0,10).replace('T',' ')}}
      </template>
      </el-table-column>
      <el-table-column
        prop="totals"
        label="面试题数量">
      </el-table-column>
      <el-table-column
        label="状态">
        <template slot-scope="scope">
          {{formState(scope.row.state)}}
        </template>
      </el-table-column>
      <el-table-column  label="操作" width="150px">
        <template slot-scope="scope">
        <el-button type="text" size="small" @click="Stopuse(scope.row)">{{scope.row.state===1 ? "禁用":"启用"}}</el-button>
        <el-button type="text" size="small" @click="Revise(scope.row)" :disabled="scope.row.state===1">修改</el-button>
        <el-button type="text" size="small" @click="Delete(scope.row)" :disabled="scope.row.state===1">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
<!-- 分页 -->
<el-pagination
  style="margin-top:20px;text-align:right"
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page.sync="from.page"
  :page-sizes="[3,5,7,10]"
  background
  layout="sizes,prev, pager, next, jumper"
  :page-size.sync="from.pagesize"
  :total="total">
</el-pagination>
</el-card>
<!-- 新增  修改 -->
<container ref="listadd" @render='hGetList'>
</container>
</div>
</template>

<script>
import { list, remove, changeState } from '@/api/hmmm/directorys.js'
import container from '../components/directorys-add.vue'
export default {
  components: {
    container
  },
  data () {
    return {
      from: {
        state: null, // 状态选择
        tagName: '',
        page: 1,
        pagesize: 10,
        subjectID: null
      },
      tableData: [], // 放置一个空数组 接受数据
      total: 0 // 设置数据总条数
    }
  },
  computed: {
    subject () {
      return this.$route.query || {}
    }
  },
  watch: {
    '$route.query': function () {
      this.hGetList()
    }
  },
  methods: {
    // 封装渲染数据
    getList () {
      const params = {
        ...this.from
      }
      list(params).then(res => {
        this.tableData = res.data.items
        this.total = res.data.counts
      })
    },
    // 获取目录
    hGetList () {
      this.from.subjectID = this.$route.query.id
      this.getList()
    },
    // 当前页数发生变化
    handleSizeChange (val) {
      this.from.page = 1
      this.from.pagesize = val
      this.getList()
    },
    // 页码发生变化
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.from.page = val
      this.getList()
    },
    // 状态
    formState (status) {
      const statusobj = {
        1: '已启用',
        0: '已禁用'
      }
      return statusobj[status]
    },
    // 禁用 启用
    Stopuse (data) {
      changeState(data).then(res => {
        this.getList()
      })
    },
    // 新增目录  修改
    Revise (row) {
      const params = {
        row: row
      }
      // 向子组件发送数据
      this.$refs.listadd.resize(params)
      this.$refs.listadd.open() // 打开对话框
    },
    // 删除
    Delete (data) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(remove(data))
        .then(res => {
          console.log(res)
          this.$message.success('删除成功')
          this.getList()
        })
    },
    // 搜索
    searchList () {
      this.hGetList()
    },
    // 清楚
    clear () {
      this.from = {
        state: null, // 状态选择
        tagName: '',
        page: 1,
        pagesize: 10,
        subjectID: null
      }
      this.hGetList()
    }
  },
  mounted () {
    this.hGetList()
  }
}
</script>

<style scoped>
.container{
  padding:20px;
  margin:10px;
  background-color: #fff
}
</style>
